<template>
  <div>
    <!-- 面包屑导航栏 start -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item class="index" :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>个人中心</el-breadcrumb-item>
      <el-breadcrumb-item>故障信息</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 面包屑导航栏 end -->

    <!-- 卡片主体区 start -->
    <el-card>
      <!-- 故障信息表格 start -->
      <el-table :data="faultList" ref="tabListData" stripe style="width: 100%; min-height: 420px" max-height="420px" border>
        <el-table-column type="selection"> </el-table-column>
        <el-table-column type="index"> </el-table-column>
        <el-table-column prop="descs" label="故障描述" width="180"> </el-table-column>
        <el-table-column prop="uname" label="提出人" width="180"> </el-table-column>
        <el-table-column prop="dealby" label="处理人"> </el-table-column>
        <el-table-column prop="createtime" label="创建时间" width="160px" sortable>
          <!-- <template slot-scope="scope">{{ scope.row.create_time | dateFormate }}</template> -->
        </el-table-column>
        <el-table-column prop="isdeal" label="状态">
          <template slot-scope="scope">
            <div v-if="scope.row.isdeal === 1">已处理</div>
            <div class="red" v-else>未处理</div>
          </template>
        </el-table-column>
        <!-- 操作列 -->
        <el-table-column prop="handle" label="操作" width="160px" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" class="btn-text" @click="showMessage($event, scope.row)" v-show="role" :disabled="scope.row.isdeal===1">处理</el-button>
            <el-button type="text" class="btn-text" @click="detail($event, scope.row)">详情</el-button>
            <el-button type="text" class="btn-text" @click="deleteFault($event, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 故障信息表格 end -->
    </el-card>
    <!-- 卡片主体区 end -->
    <!-- 故障详情弹框 start -->
    <el-dialog title="故障详情" :visible.sync="faultValue" width="35%">
      <div>
        <!-- 信息展示 start -->
        <el-form label-width="0px">
          <el-form-item>
            <el-input type="textarea" autosize v-model.trim="faultDetal"></el-input>
          </el-form-item>
        </el-form>
        <!-- 信息展示 end -->
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button class="btn-reset" @click="close($event)" size="small">关闭</el-button>
      </div>
    </el-dialog>
    <!-- 故障详情弹框 end -->

    <!-- 故障弹框 start -->
    <el-dialog title="故障详情" :visible.sync="readValue" width="35%">
      <div>
        <!-- 信息展示 start -->
        <el-form label-width="0px">
          <el-form-item>
            <el-input type="textarea" autosize v-model.trim="faultDetal"></el-input>
          </el-form-item>
        </el-form>
        <!-- 信息展示 end -->
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button class="btn-reset" @click="cancel($event)" size="small">关闭</el-button>
        <el-button class="btn-often" @click="read($event)" size="small">已处理</el-button>
      </div>
    </el-dialog>
    <!-- 故障弹框 end -->
  </div>
</template>

<script>
import btn from '../utils/btn.js'
export default {
  data() {
    return {
      faultList: [],
      role: false,
      //   故障详情弹窗开关
      faultValue: false,
      //   阅读详情弹窗开关
      readValue: false,
      //   故障详情
      faultDetal: '',
      //   修改的rowId
      rowId: ''
    }
  },
  created() {
    //   获取角色信息
    this.getRole()
  },
  methods: {
    getRole() {
      const user = JSON.parse(window.sessionStorage.getItem('user'))
      if (user.role === '超级管理员' || user.role === '管理员') {
        // 获取所有故障信息
        this.getFaultList()
        this.role = true
      } else {
        // 获取当前用户创建的故障信息
        this.getFaultListById(user.id)
      }
    },
    async getFaultList() {
      // 获取故障信息
      const res = await this.$http.post('getAllFault', {})
      //   console.log('故障信息', res.data)
      if (res.data) {
        this.faultList = res.data
      }
    },
    async getFaultListById(id) {
      // 根据id获取故障信息
      const res = await this.$http.get('getFault', {
        params: {
          uid: id
        }
      })
      //   console.log('故障信息', res.data)
      if (res.data) {
        this.faultList = res.data
      }
    },
    async deleteFault(e, row) {
      btn.preBtnFocus(e)
      if (row.isdeal === 0) {
        this.$message.warning('此故障还未解决，不能删除哦！')
      } else {
        //   根据id删除故障信息
        const res = await this.$http.get('deleteFault', {
          params: {
            id: row.id
          }
        })
        if (res.data === '删除成功！') {
          this.$message.success('删除成功！')
          this.getRole()
        } else {
          this.$message.error('删除失败！')
        }
        //   console.log(res.data)
      }
    },
    // 打开详情弹窗
    detail(e, row) {
      btn.preBtnFocus(e)
      this.faultValue = true
      this.faultDetal = row.descs
    },
    // 关闭详情弹窗
    close(e) {
      btn.preBtnFocus(e)
      this.faultValue = false
    },
    cancel(e) {
      btn.preBtnFocus(e)
      this.readValue = false
    },
    showMessage(e, row) {
      btn.preBtnFocus(e)
      //  打开弹框
      this.readValue = true
      this.faultDetal = row.descs
      this.rowId = row.id
    },
    // 处理故障信息
    async read(e) {
      btn.preBtnFocus(e)
      // 获取处理人信息
      const user = JSON.parse(window.sessionStorage.getItem('user'))
      console.log(user)
      //   根据id处理故障信息
      const res = await this.$http.get('updateFault', {
        params: {
          id: this.rowId,
          did: user.id,
          dealby: user.uname
        }
      })
      if (res.data === '阅读成功！') {
        this.$message.success('处理成功！')
        this.readValue = false
        this.getRole()
      } else {
        this.$message.error('处理失败！')
      }
    //   console.log(res.data)
    }
  }
}
</script>

<style lang="less" scoped>
.red {
  color: red;
}
</style>
